<template>

  <li @mouseenter.prevent="showActionButtons=true" @mouseleave.prevent="showActionButtons=false">
    <p>
      <span>{{ video.title }}</span>
      <span v-show="showActionButtons" class="acts">
        <el-button type="text" @click="editVideoHandler()">编辑</el-button>
        <el-button type="text" @click="deleteVideoHandler()">删除</el-button>
      </span>
    </p>

    <el-dialog :title="videoFormTitle" :visible.sync="dialogVideoFormVisible">
      <el-form ref="chapterForm" :model="videoForm">
        <el-form-item label="小节标题" :label-width="formLabelWidth">
          <el-input v-model="videoForm.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="小节排序" :label-width="formLabelWidth">
          <el-input-number v-model="videoForm.sort" autocomplete="off" :min="0" controls-position="right" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVideoFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdateVideoHandler">确 定</el-button>
      </div>
    </el-dialog>
  </li>

</template>

<script>
import videoService from '@/api/edu/video'

export default {
  name: 'VideoListItem',
  props: {
    courseId: String,
    chapterId: String,
    video: Object
  },
  data() {
    return {
      videoFormTitle: '添加章节',
      formLabelWidth: '120px',
      showActionButtons: false,
      dialogVideoFormVisible: false
    }
  },
  computed: {
    videoForm() {
      return {
        courseId: this.courseId,
        chapterId: this.chapterId,
        id: this.video.id,
        title: this.video.title,
        sort: this.video.sort
      }
    }
  },
  created() {
  },

  methods: {
    addVideoHandler(chapterId) {
      this.videoFormTitle = '添加小节'
      this.videoForm = {}
      this.videoForm.sort = 0
      this.videoForm.courseId = this.courseId
      this.videoForm.chapterId = chapterId
      this.dialogVideoFormVisible = true
    },

    saveOrUpdateVideoHandler() {
      if (this.videoForm.id) {
        this.updateVideo()
      } else {
        this.insertVideo()
      }
    },
    editVideoHandler() {
      this.videoFormTitle = '编辑小节'
      this.dialogVideoFormVisible = true
    },
    deleteVideoHandler() {
      this.deleteVideo()
    },
    insertVideo() {
      videoService.addVideo(this.videoForm).then(res => {
        this.dialogVideoFormVisible = false
        this.fetchData()
        this.$message({
          type: 'success',
          message: '添加小节成功'
        })
        this.resetVideoForm()
      })
    },
    updateVideo() {
      videoService.updateVideo(this.videoForm).then(res => {
        this.dialogVideoFormVisible = false
        this.fetchData()
        this.$message({
          type: 'success',
          message: '修改小节成功'
        })
      })
    },
    deleteVideo() {
      const videoId = this.video.id
      videoService.deleteVideo(videoId).then(res => {
        this.fetchData()
        this.$message({
          type: 'success',
          message: '删除小节成功'
        })
      })
    }
  }
}
</script>

<style scoped>
.chapterList {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.chapterList li {
  position: relative;
}
.chapterList p {
  float: left;
  font-size: 20px;
  margin: 10px 0;
  padding: 10px;
  height: 70px;
  line-height: 50px;
  width: 100%;
  border: 1px solid #ddd;
}
.chapterList .acts {
  float: right;
  font-size: 14px;
}

.videoList {
  padding-left: 50px;
}
.videoList p {
  float: left;
  font-size: 14px;
  margin: 10px 0;
  padding: 10px;
  height: 50px;
  line-height: 30px;
  width: 100%;
  border: 1px dotted #ddd;
}
</style>
